<template>
  <div class="layout-container">
    <!-- 侧边栏 -->
    <Sidebar 
      :is-collapsed="isSidebarCollapsed"
      :is-mobile-menu-open="isMobileMenuOpen"
      :online-users="onlineUsers"
      @toggle-collapse="toggleSidebar"
      @menu-select="handleMenuSelect"
    />
    
    <!-- 主内容区域 -->
    <main class="main-container" :class="{ 'main-expanded': isSidebarCollapsed }">
      <!-- 顶部导航栏 -->
      <Header 
        :is-mobile="isMobile"
        :is-header-hidden="isHeaderHidden"
        :notification-count="notificationCount"
        @toggle-mobile-menu="toggleMobileMenu"
        @search="handleSearch"
        @user-command="handleUserCommand"
      />
      
      <!-- 路由视图容器 -->
      <div class="content-container">
        <router-view></router-view>
      </div>
    </main>
    
    <!-- 移动端遮罩层 -->
    <div 
      v-if="isMobile && isMobileMenuOpen" 
      class="mobile-overlay"
      @click="toggleMobileMenu"
    ></div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import Sidebar from './Sidebar.vue';
import Header from './Header.vue';

export default {
  name: 'AppLayout',
  components: {
    Sidebar,
    Header
  },
  setup() {
    const router = useRouter();
    
    // 响应式数据
    const isSidebarCollapsed = ref(false);
    const notificationCount = ref(3);
    const onlineUsers = ref(12);
    const isMobile = ref(false);
    const isMobileMenuOpen = ref(false);
    const isHeaderHidden = ref(false);
    const lastScrollTop = ref(0);

    // 检测屏幕尺寸
    const checkScreenSize = () => {
      const currentWidth = window.innerWidth;
      const wasMobile = isMobile.value;
      isMobile.value = currentWidth <= 768;
      
      // 当屏幕从移动端恢复到桌面端时，自动展开侧边栏并关闭移动端菜单
      if (!isMobile.value && wasMobile) {
        isSidebarCollapsed.value = false;
        isMobileMenuOpen.value = false;
      }
      
      // 当屏幕缩小到移动端时，自动折叠侧边栏
      if (isMobile.value && !wasMobile) {
        isSidebarCollapsed.value = true;
        isMobileMenuOpen.value = false;
      }
    };

    // 切换侧边栏
    const toggleSidebar = () => {
      isSidebarCollapsed.value = !isSidebarCollapsed.value;
    };

    // 切换移动端菜单
    const toggleMobileMenu = () => {
      isMobileMenuOpen.value = !isMobileMenuOpen.value;
    };

    // 处理菜单选择
    const handleMenuSelect = (index) => {
      console.log('菜单选中:', index);
      // 在移动端选择菜单后自动关闭菜单
      if (isMobile.value) {
        isMobileMenuOpen.value = false;
      }
    };

    // 处理搜索
    const handleSearch = (keyword) => {
      console.log('搜索关键词:', keyword);
      ElMessage.success(`搜索功能: ${keyword}`);
    };

    // 处理用户命令
    const handleUserCommand = (command) => {
      console.log('用户命令:', command);
      
      if (command === 'logout') {
        // 处理退出登录
        ElMessage.success('退出登录成功');
        router.push('/login');
      }
    };

    // 处理滚动事件
    const handleScroll = () => {
      const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
      
      if (currentScrollTop > lastScrollTop.value && currentScrollTop > 60) {
        // 向下滚动时隐藏头部
        isHeaderHidden.value = true;
      } else {
        // 向上滚动时显示头部
        isHeaderHidden.value = false;
      }
      
      lastScrollTop.value = currentScrollTop;
    };

    // 生命周期钩子
    onMounted(() => {
      checkScreenSize();
      window.addEventListener('resize', checkScreenSize);
      window.addEventListener('scroll', handleScroll);
    });

    onUnmounted(() => {
      window.removeEventListener('resize', checkScreenSize);
      window.removeEventListener('scroll', handleScroll);
    });

    return {
      isSidebarCollapsed,
      notificationCount,
      onlineUsers,
      isMobile,
      isMobileMenuOpen,
      isHeaderHidden,
      toggleSidebar,
      toggleMobileMenu,
      handleMenuSelect,
      handleSearch,
      handleUserCommand
    };
  }
};
</script>

<style scoped>
.layout-container {
  display: flex;
  min-height: 100vh;
  position: relative;
}

.main-container {
  flex: 1;
  margin-left: 260px;
  min-height: 100vh;
  background: transparent;
  transition: margin-left 0.3s ease;
  position: relative;
  z-index: 1;
  width: calc(100vw - 260px);
  overflow-x: hidden;
}

.main-expanded {
  margin-left: 64px;
  width: calc(100vw - 64px);
  overflow-x: hidden;
}

/* 确保侧边栏折叠时导航栏正确显示 */
@media (min-width: 769px) {
  .main-expanded .top-header {
    left: 64px;
    width: calc(100vw - 64px);
  }
}

.content-container {
  padding: 80px 24px 24px;
  min-height: calc(100vh - 140px);
  overflow-x: hidden;
  overflow-y: auto;
  margin-left: 0;
  width: 100%;
  box-sizing: border-box;
  background: #f8fafc;
  position: relative;
}

.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1002;
}

/* 移动端样式 - 简化版本 */
@media (max-width: 768px) {
  .main-container {
    margin-left: 0;
    width: 100vw;
    overflow-x: hidden;
  }
  
  .content-container {
    padding: 80px 16px 16px;
    min-height: calc(100vh - 120px);
  }
}

/* 平板端样式 */
@media (min-width: 769px) and (max-width: 1024px) {
  .main-container {
    margin-left: 240px;
    width: calc(100vw - 240px);
  }
  
  .content-container {
    padding: 80px 20px 20px;
  }
}

/* 大屏幕优化 */
@media (min-width: 1440px) {
  .content-container {
    padding: 80px 32px 32px;
  }
}
</style> 